<template>
  <div>
    <el-container class="frame-container">
      <el-header class="header">
         <a href="/" class="brand"><strong>LingMoSheng</strong>System</a>
        <el-row style="width: 100%;">
          <el-col class="nav_col_l" :span="4">
            欢迎您，{{ $auth.user.username }}！
          </el-col>
          <el-col class="nav_col_r" :span="4" :offset="14">
            <el-button @click="logout">退出</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside class="aside" width="20vh">
          <el-menu
              :default-active="activeIndex"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              active-text-color="#ffd04b"
              text-color="#fff"
              @select="handleSelect"
              router
          >
            <el-menu-item index="welcome">
              <el-icon ><House v-if="activeIndex !== 'welcome'" /><HomeFilled v-else/></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="merchant">
              <el-icon ><Briefcase v-if="activeIndex === 'merchant'" /><Handbag v-else/></el-icon>
              <span>商家</span>
            </el-menu-item>
            <el-menu-item index="users">
              <el-icon ><UserFilled v-if="activeIndex === 'users'" /><User v-else/></el-icon>
              <span>用户</span>
            </el-menu-item>
            <el-menu-item index="order">
              <el-icon ><List v-if="activeIndex === 'order'" /><Document v-else/></el-icon>
              <span>订单</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main class="main">
            <router-view></router-view>
          </el-main>
          <el-footer class="footer">Footer</el-footer>
        </el-container>
      </el-container>

    </el-container>
  </div>
</template>

<script>
import {Briefcase, Document, Handbag, HomeFilled, House, List, User, UserFilled} from "@element-plus/icons-vue";

export default {
  name: "Frame",
  components: {List, Handbag, Briefcase, UserFilled, House, Document, User, HomeFilled},
  data(){
    return{
      activeIndex : 'welcome',
    }
  },
  methods: {
    logout(){
      this.$router.replace('/login')
      this.$message.info('退出成功')
      this.$auth.clearUserAndToken()
    },
    handleSelect(key, keyPath){
      this.activeIndex = keyPath[0]
    }
  }
}
</script>

<style scoped lang="scss">
.frame-container{
  height: 100vh;
  .header{
    background: #00a65a;
    display: flex;
    .brand{
      text-decoration:none;
      padding-left: 40px;
      width: 20vh;
      background: #00a46a;

      font-size: 20px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav_col_r{
      text-align: right;
      padding-top: 10px;
    }
    .nav_col_l{
      text-align: left;
      margin-left: 64px;
      padding-top: 16px;
    }
  }
  .aside{
    background-color: #545c64;
  }
  .footer{
    background: darkorange;
  }
  .main{

  }
}
</style>

<style scoped>
.aside >>> .el-menu{
  border-right: none;
}
</style>
